<template>
    <rx-dialog @handOk="onOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.fieldRemarks','字段备注')" prop="fieldLabel">
                                <span>{{ mdl.fieldLabel }}</span>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.fieldKey','字段标识')" prop="fieldName">
                                <span>{{ mdl.fieldName }}</span>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.chartType','图表类型')" prop="chartType">
                                <a-select :placeholder="i18n('form.chartType','图表类型')" defaultValue="line" v-model="mdl.chartType" :getPopupContainer="(p) => p.parentNode">
                                    <a-select-option value="line">{{i18n('form.lineChart','折线')}}</a-select-option>
                                    <a-select-option value="bar">{{i18n('form.barChart','柱状')}}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.position','位置')" prop="position">
                                <a-select :placeholder="i18n('form.position','位置')"  defaultValue="left" v-model="mdl.position" :getPopupContainer="(p) => p.parentNode">
                                    <a-select-option value="left">{{i18n('form.left','左')}}</a-select-option>
                                    <a-select-option value="right">{{i18n('form.right','右')}}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.minScale','最小刻度')" prop="min">
                                <a-input v-model="mdl.min"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.maxScale','最大刻度')" prop="max">
                                <a-input v-model="mdl.max"></a-input>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.dataFormatting','数据格式化')" prop="formatter">
                                <a-input v-model="mdl.formatter"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.interval','间隔')" prop="offset">
                                <a-input-number v-model="mdl.offset" :min="0" :max="100" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>

import { Util, Dialog, RxLayout, BaseForm} from "@lowcode/jpaas-common-lib";
export default {
    name: "MeasureSetting",
    props: {
        measure:{
            type:Object
        },
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
    },
    mixins: [BaseForm],
    components: {
        RxLayout
    },
    data() {
        return {
            rules: {},
            mdl:{
                fieldLabel:"",
                fieldName:"",
                chartType:"line",
                position:"left",
                min:0,
                max:100,
                formatter:"",
                offset: 0,
            }
        }
    },
    created() {
        this.mdl=Object.assign(this.mdl,this.measure);
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        onOk(){
            Util.closeWindow(this, "ok",this.mdl);
        },
        cancel(){
            Util.closeWindow(this, "cancel");
        }
    },
    watch: {

    }
}
</script>

<style scoped>

</style>